<template>
	<view class="body">
		<view class="section-sign ss-line-2 section-sign-select">
			<img src="/static/icon/logo-min.png"
			     class="icon"/>
			<view class="text">首页</view>
		</view>
		<view v-for="item in state.category" class="section-sign ss-line-2">
			<img :src="item.icon"
			     class="icon"/>
			<view class="text">{{ item.name }}</view>
		</view>
	</view>
</template>

<script setup>
  /**
   * 基础组件 - 搜索栏
   *
   * @property {String} elBackground 			- 输入框背景色
   * @property {String} iconColor 			- 图标颜色
   * @property {String} fontColor 		  	- 字体颜色
   * @property {Number} placeholder 			- 默认placeholder
   * @property {Number} topRadius 			- 组件上圆角
   * @property {Number} bottomRadius 			- 组件下圆角
   *
   * @slot keywords							- 关键字
   * @event {Function} click 					- 点击组件时触发
   */

  import { computed, reactive } from 'vue';
  import sheep from '@/sheep';

  // 组件数据
  const state = reactive({
    searchVal: '',
	  category: [
		  /*{
				name: '角色',
			  icon: '/static/icon/jszb.png',
			  value: '-1'
		  },*/
		  {
			  name: '明星',
			  icon: '/static/icon/mxzb.png',
			  value: '-1'
		  },
		  {
			  name: '卡牌',
			  icon: '/static/icon/kapai.png',
			  value: '-1'
		  },
		  {
			  name: '公仔',
			  icon: '/static/icon/gongzai.png',
			  value: '-1'
		  },
		  {
			  name: '徽章',
			  icon: '/static/icon/huizhang.png',
			  value: '-1'
		  },
		  /*{
			  name: '挂件',
			  icon: '/static/icon/guajian.png',
			  value: '-1'
		  },*/
		  {
			  name: '穿搭',
			  icon: '/static/icon/yifu.png',
			  value: '-1'
		  },
		  /*{
			  name: '宝可梦',
			  icon: '/static/icon/pokmen.png',
			  value: '-1'
		  },*/
	  ]
  });

  // 事件页面
  const emits = defineEmits(['click']);

  // 接收参数
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    // 输入框背景色
    elBackground: {
      type: String,
      default: '',
    },
    height: {
      type: Number,
      default: 36,
    },
    // 图标颜色
    iconColor: {
      type: String,
      default: '#b0b3bf',
    },
    // 字体颜色
    fontColor: {
      type: String,
      default: '#b0b3bf',
    },
    // placeholder
    placeholder: {
      type: String,
      default: 'IM任意搜~',
    },
    radius: {
      type: Number,
      default: 0,
    },
    width: {
      type: String,
      default: '500rpx',
    },
    navbar: {
      type: Boolean,
      default: true,
    },
  });

  // 点击
  const click = () => {
    emits('click');
  };

  function onSearch(e) {
    if (e.value) {
      sheep.$router.go('/pages/goods/list', { keyword: e.value });
    }
  }
</script>

<style lang="scss" scoped>

.body {
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	display: flex; /* 使用flex布局 */
	justify-content: flex-start; /* 元素靠左排列 */
	align-items: center; /* 垂直居中对齐元素 */
	opacity: 1;

	.icon {
		width: 50px; /* 图标宽度 */
		height: 50px; /* 图标高度 */
	}

	.section {
		padding-left: 1.5%;
		display: flex; /* 同样使用flex布局 */
		align-items: center; /* 居中对齐元素 */
	}

	.section-sign {
		padding-left: 5%;

		img {
			//margin-left: 20rpx;
		}

		.text {
			font-size: 24rpx;
			margin-left: 25%;
			margin-top: -5rpx;
			color: #3E3A39;
			font-weight: 500;
		}
	}

	.section-sign-select {
		padding-left: 1.5%;
		margin-right: 2%;

		img {
			//margin-left: 20rpx;
		}

		.text {
			font-size: 24rpx;
			margin-left: 25%;
			margin-top: -5rpx;
			color: #F39800;
			font-weight: 500;
		}
	}

	.border-content {
		border: 2rpx solid #eee;
	}
	.search-content {
		width: 60%;
		height: 35px;
		opacity: 1;
		border-radius: 30px !important;
		background: #F2F2F2;
		padding-right: 20rpx;
		color: #7E7E7E;

		//border: 1px solid #F39800;
		flex: 1;
		// height: 80rpx;
		position: relative;
		.search-icon {
			font-size: 28rpx;
			margin-right: 5rpx;
			margin-left: 20rpx;
			margin-top: 3rpx;
		}
		.keyword-link {
			position: absolute;
			right: 16rpx;
			top: 18rpx;
		}

		.search-input {
			font-size: 27rpx;
			color: #7E7E7E !important;
		}
	}
}


:deep() {
	.uni-scroll-view-content {
		display: ruby-text !important;
	}
}

</style>
